<!-- map -->
<template>
  <div class="map-box">
    <div id="lygMap"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getDetailMap } from "../../assets/json/lygjson2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      lygjson: {},
      pointData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getJson() {
      return getDetailMap();
    },
    charet(arr) {
      // console.log('chart了');
      // console.log(this.lygjson);
      // console.log(arr);
      let mapChart = this.$echarts.init(document.getElementById("lygMap"));
      this.$echarts.registerMap("lianyungang", this.lygjson);
      // option
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params);
            return params.name + "  : 内容待补充";
          },
        },
        geo: {
          map: "lianyungang",
          layoutCenter: ["50%", "50%"],
          layoutSize: "90%",
          show: true,
          label: {
            normal: {
              show: true,
              color: "#ffffff",
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              color: "rgba(0, 92, 169, .8)", //地图背景色
              borderColor: "#ffffff", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(0, 92, 169, .3)", //悬浮背景
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            // animation: true,
            rippleEffect: {
              brushType: "stroke",
            },
            symbolSize: function () {
              // console.log(val + "==>" + params);
              //散点大小
              return 15;
            },
            data: arr.map(function (itemOpt) {
              console.log(itemOpt);
              //散点生成
              return {
                name: itemOpt.com_name,
                // value: [
                //   itemOpt.longitude,
                //   itemOpt.latitude,
                //   itemOpt.value,
                //   itemOpt.company,
                //   itemOpt.state,
                //   itemOpt.equipment,
                // ],

                value: [itemOpt.com_lng, itemOpt.com_lat],

                label: {
                  emphasis: {
                    position: "right",
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#eee",
                  },
                },
              };
            }),
          },
        ],
      };
      // option end
      mapChart.setOption(option);
    },
    async init() {

      let arr = []

      this.$nextTick(() => {
        this.charet(arr);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // return console.log(this.getJson().lyg);
    // this.lygjson = this.getJson().lyg
    this.lygjson = this.getJson()['lyg'];
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.map-box {
  width: 100%;
  height: 100%;
  // 背景动画
  position: relative;

  // background-color: rgba(0,0,0,.1);
  #lygMap {
    width: 100%;
    height: 100%;
  }

  // 动画
  @keyframes myfirst2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes myfirst {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-359deg);
    }
  }
}
</style>